<template>
  <el-container style="width: 100%" direction="vertical">
    <el-row style="width: 100%; padding: 8px 2px">
      <el-col
        style="margin-top: 16px"
        v-for="book in bookList.list"
        :key="book.book_id"
        :xs="24"
        :sm="12"
        :md="6"
        :lg="4"
        :xl="4"
      >
        <div class="book-item" @click="book_detail(book.book_id)">
          <div class="img-div">
            <el-image
              fit="cover"
              style="height: 280px"
              :src="`${base_url + book.b_cover}`"
            />
          </div>
          <div class="book-desc">
            <div>
              <el-text style="font-weight: bold" truncated>{{
                book.b_name
              }}</el-text>
              <el-text truncated>{{ book.author }} 著</el-text>
            </div>
            <div>
              <el-text>库存数量：{{ book.book_num }}</el-text>
              <el-text>借阅次数：{{ book.borr_num }}</el-text>
            </div>
          </div>
        </div>
      </el-col>
      
    </el-row>
    <el-row style="margin: 20px;">
        <el-col :span="24" style="display: flex; justify-content: center;">
          <el-pagination
            v-model:current-page="pages.currentPage"
            v-model:page-size="pages.pageSize"
            :page-sizes="[5, 10, 20, 50]"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="bookList.total"
            @size-change="handleFrontSizeChange"
            @current-change="handleFrontCurrentChange"
            hide-on-single-page
          />
        </el-col>
      </el-row>
  </el-container>
</template>

<script setup>
import { onMounted, watch, ref } from "vue";
import { useRouter } from "vue-router";
import http from "../axios";
const props = defineProps(["cid"]);
const bookList = ref({});
const base_url = ref(import.meta.env.VITE_BASE_APP_PATH);
const router = useRouter();

const pages = ref({
  pageNum: 1,
  pageSize: 12,
});

watch(
  () => props.cid,
  (cid) => {
    book_list(cid[0]);
  }
);

onMounted(() => {
  book_list(props.cid);
});

const book_list = (cid) => {
  http
    .get("/book/list", {
      params: {
        cState: 0,
        cid: cid,
        ...pages.value,
      },
    })
    .then((resp) => {
      bookList.value = resp.data.data;
    });
};

const book_detail = (bid) => {
  router.push(`/index/detail/${bid}.html`);
};

const handleFrontSizeChange = (val)=>{
    pages.value.pageSize = val;
    book_list();
}

const handleFrontCurrentChange = (val)=>{
    pages.value.pageNum = val;
    book_list();
}
</script>

<style>
.book-item {
  width: 100%;
  height: 350px;
  padding: 10px;
  box-sizing: border-box;
  position: relative;
}

.book-item:hover {
  box-shadow: 0 0 3px 1px #888;
  cursor: pointer;
}

.img-div {
  width: 100%;
  height: 270px;
  overflow: hidden;
  text-align: center;
}

/* .book-desc{
    position: absolute;
    bottom: 0;
    left: 0;
    width: ;
} */
.book-desc {
  margin-top: 5px;
  color: #222;
}
.book-desc > div {
  display: flex;
  margin-top: 8px;
  justify-content: space-between;
}
.book-desc > div:nth-child(2) {
  font-size: 14px;
}
</style>
